<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="o7"></p>
      <p class="big">个性化图书推荐</p>
      <p class="o5">猜你喜欢的图书</p>
    </div>

    <div class="page-main-box">
      <div class="page-opacity-box">
        <div class="swiper mySwiper2 stop-swiping">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in list" :key="index" class="swiper-slide">
              <div class="book-img">
                <img :src="item.imgUrl || bookNull()" @error.once="moveErrorImg" />
              </div>
              <p class="book-ppp">{{ item.title }}</p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination2"></div>
      </div>
    </div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>
import Swiper from 'swiper'
import axios from 'axios'
// import moment from 'moment'
// import md5 from 'md5'
import { report } from '@/mixins/report'
import { getBookCover } from '@/utils/bookCover'

export default {
  name: 'pageRecommend',
  props: ['reportData', 'glc'],
  mixins: [report],
  data () {
    return {
      swiper: null,
      list: [],
      rdid: ''
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          this.rdid = val.rdid
          this.search()
          this.$nextTick(() => {
            this.initSwiper()
          })
        }
      }
    }
  },
  methods: {
    search () {
      const glc = this.glc
      const rdid = this.rdid
      axios.get(`${process.env.VUE_APP_RECOMMEND}?g=${glc}&r=${rdid}&size=24`)
        .then((response) => {
          const res = response.data
          this.list = res.data || []
          getBookCover(this.list).then(res => {
            this.list = res.list
          })
        })
    },
    initSwiper () {
      this.swiper = new Swiper('.mySwiper2', {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerGroup: 4,
        spaceBetween: 0,
        observer: true,
        pagination: {
          el: '.swiper-pagination2',
          clickable: true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #548dae 0%, #75cce5 50%, #75cce5 85%, #548dae 100%);
  background-size: 100%;
}
.page-opacity-box {
  padding-top: 34px;
}
.swiper {
  width: 960px;
  height: 912px;
  margin: 0 auto;
  overflow: hidden;
  .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .swiper-slide {
    // width: 240px !important;
    height: 456px;
  }
}
.book-img {
  width: 218px;
  height: 304px;
  border-radius: 20px;
  font-size: 0;
  overflow: hidden;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.book-ppp {
  font-size: 32px;
  line-height: 42px;
  height: 84px;
  color: #666666;
  text-align: center;
  margin-top: 20px;
  padding: 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
